<template>
    <!--整体布局-->
    <el-container class="home-container">
      <!--头部布局-->
	  <el-header>
	  	<div>
		  	<img src="../assets/logo.png">
		  	<span>
		  		仓库管理系统
		  	</span>
	  	</div>
	  	<el-button type="info" @click="logout" >退出</el-button>
	  </el-header>
	  <!--主体布局-->
	  <el-container>
	  	<!--左侧边-->
	    <el-aside :width="isCollapse? '64px':'200px'">
	    	<!--左侧菜单-->
			<el-menu  
      background-color="#303133"
      text-color="#fff"
      active-text-color="#ffd04b" unique-opened  :collapse="isCollapse"  :collapse-transition="false"
      :router="true" :default-active='activePath'
      >
      		  <!--添加折叠按钮-->
      		  <div class="collapse" @click="changeCollapse">
      		  		lll
      		  </div>
			  <!--一级菜单-->
		      <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id" >
				<!--一级菜单模板-->
		        <template slot="title">
		          <i class='el-icon-location'></i>
		          <span>{{item.authName}}</span>
		        </template>
		        <!--二级菜单-->
		          <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="ItemActive(subItem.path)">
		          	<template solt="title">
						<!--图标-->		          		
		          		<i :class="subItem.icon" ></i>
		         		<!--文本-->
		         		<span>{{subItem.authName}}</span>
		          	</template>
		          </el-menu-item>
		      </el-submenu>
		    </el-menu>
		</el-aside>

	    <!--右边的主体-->
	    <el-main>
	    	<router-view></router-view>
	    </el-main>
	  </el-container>
    </el-container>
</template>

<script>
    export default {
    	data(){
    		return {
    			//左侧菜单数据,初始化菜单
    			menulist:[
    			{id:1,authName:'用户管理',icon:'el-icon-users',children:[
    				{id:101,authName:'用户列表',path:'user',icon:'el-icon-menu',children:''},
    				{id:102,authName:'视频列表',path:'video',icon:'el-icon-menu',children:''}
    			]},
    			{id:2,authName:'权限管理',icon:'el-icon-rights',children:[
    				{id:102,authName:'角色列表',path:'role',icon:'el-icon-menu',children:''},
    				{id:103,authName:'权限列表',path:'right',icon:'el-icon-menu',children:''},
    			]},
    			{id:3,authName:'商品管理',icon:'el-icon-goods',children:[
    				{id:102,authName:'商品列表',path:'categories',icon:'el-icon-menu',children:''},
    				{id:103,authName:'分类参数',path:'goods',icon:'el-icon-menu',children:''},
    				{id:103,authName:'商品分类',path:'goods',icon:'el-icon-menu',children:''}
    			]},
    			{id:4,authName:'订单管理',icon:'el-icon-orders',children:[]},
    			{id:5,authName:'数据统计',icon:'el-icon-reports',children:[]
    			}],
    			isCollapse: false,
    			activePath : ''
    		}
    	},
    	created(){
    		//生命周期函数
    		this.getMenuList(),
    		//将session作用域中的值，放入activePath中
    		this.activePath = window.sessionStorage.getItem('activePath');
    	},
        methods:{
            logout(){
                // 清除会话中的内容
                window.sessionStorage.clear();
                // 重定向到登录界面
                this.$router.push('/login');
            },
            //获取所有的菜单
            async getMenuList(){
            	const {data:res} = await this.$http.get('menus');
            	console.log("res="+res);
            	if(res.meta.status !== 200) return this.$message.error(res.meta.msg+"。已启用本地缓存");
            	//将查询到的数据放入menulist数组中
            	this.menulist = res.data;
				console.log("res2="+res);
            },
            changeCollapse(){
            	this.isCollapse=!this.isCollapse;
            },
            //优化左侧点击事件,点击时将菜单的路由地址放入sessionStorage里面
            ItemActive(activePath){
            	console.log("!!!!!"+activePath);
            	window.sessionStorage.setItem("activePath",activePath);
            	//this.activePath = activePath;
            }
        }
    };
</script>

<!--开发依赖于less，scoped为防止样式冲突-->
<style lang="less" scoped>
.el-header {
	background-color: #E6A23C;
	//调整左右两边组件的位置,先浮动,再组件两边对齐
	display: flex;
	justify-content: space-between;
	//调整组件的上下位置:中心
	align-items: center;
	//调整图标div的左边距
	padding-left: 15px;
	//图标中的文字大小
	font-size: 22px;
	//调整DIV模块
	>div {
		display: flex;
		align-items: center;
		
		img {
			//图片会等比例缩小
			height: 50px;			
		}
		span {
			//调整文字和图标的位置
			margin-left: 15px;
		}
	}
}

.el-aside {
	background-color: #303133;
	>el-menu {
		border-right: none;
	}
}

.el-main {
	background-color: #F2F6FC;
}
.home-container {
	height: 100%;
}

.el-menu {
	//background-color: crimson;

}
//左侧菜单栏,图标和文字之间的距离
.el-submenu [class^=el-icon-]  {
	margin-right: 12px;
}
.collapse {
	text-align: center;
	font-size: 18px;
	//子间距
	letter-spacing: 0.2em;
	//鼠标放上去时为小手
	cursor: pointer;
}
</style>